<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Create Order</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link th:href="@{/css/custom.css}" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/page/home">Home</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/page/orders">Orders <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/page/products">Product</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/page/members">Member</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/page/order_create">Portal</a>
            </li>
        </ul>
    </div>
</nav>

<!-- Main Content -->
<div class="container mt-4">
    <h1 class="h2">Create Order</h1>
    <div class="row" id="productCards">
        <!-- Product cards will be loaded here via AJAX -->
    </div>
</div>

<!-- Bootstrap JS and dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function() {
        function loadProducts() {
            $.ajax({
                url: '/order/product/page',
                method: 'GET',
                success: function(response) {
                    var data = response.data; // Extract data from response
                    var productCards = $('#productCards');
                    productCards.empty(); // Clear existing cards
                    data.forEach(function(product) {
                        var card = `
                        <div class="col-md-4 mb-4">
                            <div class="card" style="cursor: pointer;" onclick="window.location.href='/page/product/detail/${product.id}'">
                                <div class="card-body">
                                    <h5 class="card-title">${product.name}</h5>
                                    <p class="card-text">Price: $${product.price}</p>
                                    <p class="card-text">Category: ${product.category}</p>
                                    <button class="btn btn-primary order-product" data-id="${product.id}">Order Now</button>
                                </div>
                            </div>
                        </div>
                    `;
                        productCards.append(card);
                    });
                },
                error: function(error) {
                    console.error('Error loading products:', error);
                }
            });
        }

        // Load products on page load
        loadProducts();

        $(document).on('click', '.order-product', function() {
            var productId = $(this).data('id');
            // Handle order logic here
            console.log('Order product:', productId);
        });

        $('#buyNowButton').click(function() {
            const productId = window.location.pathname.split('/').pop();
            const quantity = $('#quantityInput').val(); // Get quantity from input field
            $.ajax({
                url: '/order/create/' + productId + '/' + quantity,
                method: 'GET',
                success: function(response) {
                    console.log('Order created successfully:', response.data); // Extract data from response
                    window.location.href = '/page/orders'; // Redirect to orders page after creating order
                },
                error: function(xhr, status, error) {
                    console.error('Error creating order:', error);
                    alert('Error creating order: ' + xhr.responseJSON.message); // Display error message
                }
            });
        });
    });
</script>

</body>
</html>